<template>
    <div>
        <h2>users根组件</h2>
        <h3>获取到id=3的data：{{ data }}</h3>
        <!-- 公共文件夹引入图片 -->
        <!-- <img src="/img/vue.jpg" alt=""> -->

        <!-- assets文件夹引入图片 -->
        <img src="~/assets/img/解释一.jpg" width="200">
        <nuxt-page />
    </div>

</template>

<script setup lang="ts">
useHead({
    title: '用户title'
})

const runtimeConfig = useRuntimeConfig()

// 通过isServer标识 判断当前环境是否是服务端
if (runtimeConfig.isServer) {
    // 只能服务器端控制台能访问
    console.log(runtimeConfig.api);
}
// 客户端
else {
    // 客户(浏览器)端控制台也能访问
    console.log(runtimeConfig.public.title);
    console.log(runtimeConfig.public.apiBase);
}

// 获取数据的方法  data返回值
const { data } = await useFetch('/posts', {
    method: 'GET',
    params: { id: 3 },

    // 以下内容可以封装为request文件
    baseURL: 'http://jsonplaceholder.typicode.com',
    // 请求拦截器
    onRequest({ request, options }) {
        console.log('请求开始', options);
        // 请求头添加信息
        // options.headers.authorization = 'cecilia'
    },
    // 响应拦截器
    onResponse({ response, options }) {
        console.log('响应开始');
    }
})

</script>

<style scoped lang="scss"></style>
